<template>
	<view class="content">
		<!-- 项目基本信息 -->
		<view class="box">
			<view class="cu-list menu margin-top" >
				<view class="c-photo" >
					<image @click="toLook()" :src="partList.image" mode=""></image>
				</view>
				<!-- 不会超出的选项 -->
				<view class="cu-item" :class="{arrow:i.isRight}" v-for="(i,j) in contract" :key="j">
					<view class="content">
						<!-- <text v-if="i.icon" :class="'cuIcon-'+i.icon" :style="[{color:i.iconColor},{fontWeight:800}]"></text> -->
						<text >{{i.title}}</text>
					</view>
					<view class="action" :style="[{color:i.color}]">
						<text>{{i.value}}</text>
					</view>
				</view>

			</view>
		</view>
		
		
	</view>
</template>

<script>
	import api from "../../../../network/index.js"
	export default {
		data() {
			return {
				contract:{},
				partList:{}
			};
		},
		methods:{
			// 查看大图
			toLook(){
				let arr = []
				arr.push(this.partList.image)
				uni.previewImage({
					urls: arr
				})
			},
			// 判断合同状态
			getStatus(status){
				if(status==1)return {value:"已结束",color: "#e54d42"}
				// if(status==1)return {value:"施工中",color: "#ffa23e"}
				if(status==0)return {value:"生效中",color: "#39b54a"}
			},
			// 获取项目详情
			getDetail(id){
				const t = this
				api.request({
					url: api.CONTRACT_LIST,
					data:{
						id: "=,"+id
					}
				}).then(res=>{
					// console.log(res)
					if(res.data.code == "200"){
						// 合同详情页面需要展示的数据
						// 合同名称，签订地址，合同编号，签订时间，合同状态
						let data = res.data.list.data[0]
						let status = t.getStatus(data.status)
						let obj = {
							name: {
								title: "合同名称",
								value: data.contract_name,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#000000",
								isRight: false,
							},
							address: {
								title: "签订地址",
								value: data.address,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#555555",
								isRight: false,
							},
							num: {
								title: "合同编号",
								value: data.contract_num,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#555555",
								isRight: false,
							},
							time: {
								title: "签署时间",
								value: data.create_time,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#555555",
								isRight: false,
							},
							status: {
								title: "状态",
								value: status.value,
								icon: "home",
								iconColor: status.color,
								color: status.color,
								isRight: false,
							},
						}
						this.contract = obj
						this.partList.image = data.url 
						console.log(data)
					} else {
						api.error(res)
					}
				}).catch(err=>{
					api.error(err)
				})
			}
		},
		onLoad(options) {
			// console.log(options)
			this.id = options.id
			this.getDetail(options.id)
		},
		onPullDownRefresh (){
			this.getDetail(this.id)
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	.c-photo{
		width: 100%;
		height: 600rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
.box{
	margin: 0 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #AAAAAA;
}
.action{
	font-size: 28rpx;
}
.cu-item{
	&:hover{
		background-color: #F5F5F5;
	}
}
</style>
